<template>
    <div class="tk_view_box">
        <div class="tk_view_top flexbox flexcenter" @click="is_show = !is_show">
            <i class="el-icon-caret-right"></i>
            <div class="tk_view_left">
                <div class="tk_view_title">广告组定向</div>
                <div class="tk_view_num">定向组数量 x {{tableData.length}}</div>
            </div>
        </div>
        <div class="tk_view_content" v-if="is_show">
            <el-table :data="tableData" max-height="340" class="view_table" ref="multipleTable">
                <el-table-column prop="audname" label="定向组名称"></el-table-column>
                <el-table-column prop="location_ids" label="地域">
                    <template slot-scope="scope">
                        {{scope.row.location_ids.map(item=>{return item.name_ch}).toString()}}
                    </template>
                </el-table-column>
                <el-table-column prop="gender" label="性别">
                    <template slot-scope="scope">
                        {{gender[scope.row.gender]}}
                    </template>
                </el-table-column>
                <el-table-column prop="age_groups" label="年龄">
                    <template slot-scope="scope">
                        <template >{{getAgeText(scope.row.age_groups)}}</template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    data() {
        return {
            is_show:false,
            tableData:[],
            gender:{
                GENDER_UNLIMITED:"不限",
                GENDER_MALE:"男性",
                GENDER_FEMALE:"女性",
            },
            ageList:[
                {
                    value:"AGE_13_17",
                    label:"13-17岁"
                },
                {
                    value:"AGE_18_24",
                    label:"18-24岁"
                },
                {
                    value:"AGE_25_34",
                    label:"25-34岁"
                },
                {
                    value:"AGE_35_44",
                    label:"35-44岁"
                },
                {
                    value:"AGE_45_54",
                    label:"45-54岁"
                },
                {
                    value:"AGE_55_100",
                    label:"55+"
                },
            ]
        };
    },
    created() {
        this.tableData = this.dataForm.adgroup.audience
    },
    methods: {
        getAgeText(list){
            let text = []
            if(list.length==0){
                text = ["不限"]
            }else{
                for(let i in this.ageList){
                    for(let a in list){
                        if(this.ageList[i].value==list[a]){
                            text.push(this.ageList[i].label)
                        }
                    }
                }
            }
            return text.toString()
        },
    },
};
</script>


<style scoped>
.tk_view_box{
    margin-bottom: 10px;
}
.tk_view_top {
    height: 65px;
    padding: 0 20px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: rgba(165, 177, 209, 0.1);
    cursor: pointer;
}
.tk_view_top .el-icon-caret-right {
    font-size: 18px;
    color: #616c85;
}
.tk_view_left {
    margin-left: 20px;
}
.tk_view_title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
}
.tk_view_num {
    font-size: 12px;
    color: #b4b7bd;
    line-height: 17px;
    margin-top: 4px;
}
.tk_view_content {
    border: 1px solid #ebebeb;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 0;
    padding: 0 20px;
}
/deep/ .view_table.el-table th{
    background-color: #fff;
    font-weight: normal;
}
/deep/ .view_table.el-table th.is-leaf{
    border-bottom: 1px solid #f1f2f3 !important;
}
/deep/ .view_table.el-table::before{
    display: none;
}
</style>

